// 当我们将函数作为一个句柄的时候，我们会省略函数名后面的括号，例如：
// function handler(){
	//do something
// }
// window.onload = handler;
// 因为，当使用函数名并加上括号的时候，函数会直接执行。而不加括号则
// 表示标识或是引用，所以可以在要用的时候再去调用它。

// jQuery.noConflict;
// 避免与其他JavaScript库的$冲突，先将$还原，这个时候用jQuery来代替
// $。例如：
// jQuery(document).ready(function($){
	// 像这样我们又可以正常的使用$了
// });
// 简短写法 
// jQuery(function($){
	// 像这样我们又可以正常的使用$了
// });

/**
$(function(){
	$('#switcher button').bind('click', function(){
		$('body').removeClass();
		$('#switcher button').removeClass('selected');
		$(this).addClass('selected');
	});
	$('#switcher-default').addClass('selected');
	$('#switcher-narrow').bind('click', function(){
		$('body').addClass('narrow');
	});
	$('#switcher-large').bind('click', function(){
		$('body').addClass('large');
	});
});
*/

/** 更简单的做法

$(function(){
	$('#switcher-default').addClass('selected');
	$('#switcher button').bind('click', function(event){
		var bodyClass = this.id.split('-')[1];
		$('body').removeClass().addClass(bodyClass);
		$('#switcher button').removeClass('selected');
		$(this).addClass('selected');
		event.stopPropagation();      
		// stopPropagation()方法阻止其他DOM元素响应该事件
		// 也就是说这里只有 button 会响应该事件
		// 另外，如果在超链接上绑定了点击事件，为防止加载
		// 新页面，可以使用 preventDefault()来阻止HTTP请求
		// 或者表单的submit事件
		// 还有就是可以在事件最后return false来同时实现上
		// 述两个函数的效果
	});
	$('#switcher').click(function(event){
		$('#switcher button').toggleClass('hidden');
	});
	$('#switcher h3').hover(
		function(){
			$(this).addClass('hover');	
		},
		function(){
			$(this).removeClass('hover');	
	});
});
**/

$(function(){
	$('#switcher-default').addClass('selected');
	$('#switcher').click(function(event){
		if($(event.target).is('button')){
			var bodyClass = event.target.id.split('-')[1];
			$('body').removeClass().addClass(bodyClass);
			$('#switcher button').removeClass();
			$(event.target).addClass('selected');
		}else{
			$('#switcher button').toggleClass('hidden');
		}
	});
});